<template>
  <div class="warpper">
    <div class="header">
      <div class="name">{{studentName}}</div>
      <div class="phone">{{studentPhoneNo}}</div>
      <div class="headerIcon"></div>
    </div>
    <div class="content">
      <div class="classList">
        <ul>
          <li
            class="subjectItem"
            v-for="(item, name) in subjectListObj"
            :key="name"
            :class="{active: name === currentSubject}"
            @click="changeTab(name)"
          >
            {{name}}
          </li>
        </ul>
      </div>
      <div class="lineBox"></div>
      <div class="detailBox">
        <div
          class="detailBoxItem"
          v-for="(item, name) in subjectListObj"
          :key="name"
          :id="name"
        >
          <div class="subjectType">
            <div>{{name}}</div>
          </div>
          <div
            v-for="(sItem, index) in subjectListObj[name]"
            :key="index"
            class="subjectBox"
          >
            <div class="d_header">
              <div class="yellowBox"></div>
              <div class="desc">
                <div
                  class="className"
                  v-if="subjectListObj[name]"
                >{{sItem.sectionName}} {{sItem.baseLevelName}}</div>
                <div class="schoolName">{{sItem.schoolName}}</div>
              </div>
            </div>
            <div
              v-for="(lItem, lindex) in sItem.list"
              :key="lindex"
              class="descItem"
            >
              <div class="activityName">{{lItem.examModelActivityName}}</div>
              <div class="a_desc">
                <div class="getScore">得分：<span class="score">{{lItem.getScore}}分</span></div>
                <div class="p_score">平均分：<span class="score">{{lItem.modelAvgScore || 0}}分</span></div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
    <div class="footer">
      <div class="logo"></div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
export default {
  data() {
    return {
      reportObj: {},
      studentName: '',
      studentPhoneNo: '',
      subjectListObj: {},
      currentSubject: '',
      itemDom: {},
      detailDom: '',
      itemOffset: {}
    }
  },
  created() {
    document.title = '成绩查分系统'
    let reportList = window.localStorage.getItem('studentReport') || ''

    this.reportObj = reportList ? JSON.parse(reportList) : {}
    if (this.reportObj.list && this.reportObj.list.length > 0) {
      this.studentName = this.reportObj.list[0].studentName
      this.studentPhoneNo = this.reportObj.list[0].studentPhoneNo
      let temp = {}
      this.reportObj.list.forEach(item => {
        if (this.subjectListObj[item.subjectName]) {
          if (
            temp[`${item.sectionName}-${item.schoolName}-${item.baseLevelName}`]
          ) {
            for (let listItem of this.subjectListObj[item.subjectName]) {
              if (
                `${item.sectionName}-${item.schoolName}-${item.baseLevelName}` ===
                `${listItem.sectionName}-${listItem.schoolName}-${listItem.baseLevelName}`
              ) {
                listItem.list.push({ ...item })
              }
            }
          } else {
            this.subjectListObj[item.subjectName].push({
              sectionName: item.sectionName,
              schoolName: item.schoolName,
              baseLevelName: item.baseLevelName,
              list: [{ ...item }]
            })
          }
        } else {
          temp[
            `${item.sectionName}-${item.schoolName}-${item.baseLevelName}`
          ] = {}
          this.subjectListObj[item.subjectName] = [
            {
              sectionName: item.sectionName,
              schoolName: item.schoolName,
              baseLevelName: item.baseLevelName,
              list: [{ ...item }]
            }
          ]
        }
      })
    }
    this.subjectListObj = { ...this.subjectListObj }
    this.currentSubject = Object.keys(this.subjectListObj)
      ? Object.keys(this.subjectListObj)[0]
      : ''
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.detailDom = document.querySelector('.detailBox')
        for (let subject of Object.keys(this.subjectListObj)) {
          this.itemDom[subject] = document.querySelector(`#${subject}`)
        }
        this.detailDomHeight = this.detailDom.clientHeight
        this.detailDomTop = this.detailDom.getBoundingClientRect().top

        this.detailDom.onscroll = this.debounce(this.scorllFun)
      }, 500)
    })
  },
  methods: {
    changeTab(subject) {
      this.$nextTick(() => {
        this.currentSubject = subject
        this.detailDom.scrollTop =
          this.itemDom[subject].offsetTop - 0.7 * window.REM - 0.3 * window.REM
      })
    },
    debounce(fn) {
      let timer = null
      return ()=>{
        clearTimeout(timer)
        setTimeout(()=>{
          fn.call(this, arguments)
        }, 50)
      }
    },
    scorllFun(e) {
      let target = e.target
      for (let item of Object.keys(this.itemDom)) {
        if (
          this.itemDom[item].getBoundingClientRect().top <
          this.detailDomHeight +
            this.detailDomTop -
            this.itemDom[item].scrollHeight -
            0.03 * window.REM
        ) {
          this.currentSubject = item
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.warpper {
  height: 100%;
  width: 7.5rem;
  background: rgb(237, 245, 255);
  .header {
    box-sizing: border-box;
    background: url('../../assets/img/rep-bg.png');
    width: 7.5rem;
    padding-top: 0.64rem;
    padding-left: 0.85rem;
    height: 3.08rem;
    font-weight: bold;
    background-size: 100% 100%;
    position: relative;
    color: #fff;
    .name {
      font-size: 0.48rem;
      line-height: 1;
    }
    .phone {
      font-size: 0.3rem;
    }
    .headerIcon {
      background: url('../../assets/img/per.png');
      width: 1.77rem;
      height: 1.43rem;
      background-size: 100% 100%;
      position: absolute;
      right: 0.56rem;
      top: 0.39rem;
    }
  }
  .content {
    background: #fff;
    width: 6.9rem;
    height: 8.58rem;
    margin: -1.2rem auto 0 auto;
    position: relative;
    .classList {
      padding: 0.23rem 0 0.13rem 0;
      ul {
        width: 4.97rem;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        .subjectItem {
          flex: 1;
          line-height: 1;
          font-size: 0.3rem;
          text-align: center;
          color: #dadada;
          &.active {
            color: #475ece;
          }
        }
      }
    }
    .lineBox {
      width: 100%;
      height: 0.1rem;
      background: rgba(218, 218, 218, 1);
    }
    .detailBox {
      padding: 0.48rem 0.26rem 0.2rem 0.28rem;
      overflow-y: scroll;
      height: 7.6rem;
      box-sizing: border-box;
    }
    .subjectType {
      background: url('../../assets/img/subjectLine.png');
      width: 6.23rem;
      height: 0.02rem;
      background-size: 100% 100%;
      margin: 0 auto 0.38rem auto;
      color: #a9c0dc;
      font-size: 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      //  margin-bottom: 0.18rem;
    }
    .subjectBox {
      margin-bottom: 0.4rem;
    }
    .d_header {
      display: flex;
      margin: 0.2rem 0;
      .yellowBox {
        margin-left: 0.1rem;
        width: 0.08rem;
        height: 0.99rem;
        background: rgba(255, 196, 15, 1);
      }
      .className {
        color: #85a5cd;
        font-size: 0.36rem;
        line-height: 1;
        margin: 0.12rem;
        font-weight: bold;
      }
      .schoolName {
        color: #95b1d3;
        font-size: 0.3rem;
        line-height: 1;
        margin-left: 0.12rem;
      }
    }
    .descItem {
      width: 6.36rem;
      height: 1.14rem;
      background: rgba(237, 245, 255, 1);
      margin: 0 auto 0.1rem auto;
      box-sizing: border-box;
      padding: 0.17rem 1.5rem 0.21rem 0.35rem;
      &:last-child {
        margin: 0 auto;
      }
      .activityName {
        font-size: 0.3rem;
        color: #000;
      }
      .a_desc {
        display: flex;
        justify-content: space-between;
        .score {
          font-size: 0.24rem;
          color: red;
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 0.4rem;
    .logo {
      background: url('../../assets/img/newLogo.png');
      width: 2.96rem;
      height: 0.51rem;
      background-size: 100% 100%;
    }
  }
}
</style>

